<template>
    <div class="main">
        <el-card class="box-card">

            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="基础配置" name="1">
                    <!-- 会员等级设置基础配置 -->
                    <el-button class="mt-4" type="primary" style="width: 100px;margin-bottom: 20px;"
                        @click="onAddItem">新增规则</el-button>
                    <el-button class="mt-4" type="primary" style="width: 100px;margin-bottom: 20px;"
                        @click="OK">保存</el-button>
                    <div style="width: 400px;margin-bottom: 20px;">
                        <el-input v-model.number="ratio" placeholder="请输入"
                            onkeyup="value=(value.replace(/\D/g,'')==''?'':parseInt(value))">
                            <template #prepend>成长值比例</template>
                            <template #append>%</template>
                        </el-input>
                        <p style="font-size: 12px;color: #666;">注释：消费金额与会员成长值的比例。例如：消费金额为1元，成长值比例为10，该设置就为10。</p>
                    </div>
                    <el-table :data="tableData" style="width: 100%" max-height="600px">
                        <el-table-column prop="name" label="名称">
                            <template #default="scope">
                                <el-input v-model="scope.row.name" placeholder="请输入" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="level" label="等级">
                            <template #default="scope">
                                <el-input v-model="scope.row.level" placeholder="请输入" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="minGrowth" label="最小成长值">
                            <template #default="scope">
                                <el-input v-model.number="scope.row.minGrowth" placeholder="请输入"
                                    onkeyup="value=(value.replace(/\D/g,'')==''?'':parseInt(value))" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="maxGrowth" label="最大成长值">
                            <template #default="scope">
                                <el-input v-model.number="scope.row.maxGrowth" placeholder="请输入"
                                    onkeyup="value=(value.replace(/\D/g,'')==''?'':parseInt(value))" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="levelIcon" label="图标地址">
                            <template #default="scope">
                                <Upload :row="scope.row.levelIcon" @OK="(url) => {
                                    scope.row.levelIcon = url
                                }"></Upload>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" label="操作">
                            <template #default="scope">
                                <el-button link type="danger" size="small" @click.prevent="deleteRow(scope.$index)">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="权益配置" name="2">
                    <el-form :inline="true" :model="page" class="demo-form-inline">
                        <el-form-item label="等级">
                            <el-input v-model="page.level" placeholder="请输入" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">搜索</el-button>
                            <el-button type="primary" @click="reset">重置</el-button>
                        </el-form-item>
                    </el-form>
                    <p style="font-size: 12px;color: #666;">注释：模糊查询该等级的所有权益</p>
                    <el-button type="primary" style="margin-bottom: 30px;" @click="addEdiClick(1)">添加</el-button>
                    <el-table :data="memberEquitiesListData" style="width: 100%" max-height="600px">
                        <el-table-column type="index" width="50" />
                        <el-table-column label="等级" align="center" prop="levelLimit">
                        </el-table-column>
                        <el-table-column label="图片" align="center" prop="photo">
                            <template #default="scope">
                                <img v-if="scope.row.photo" style="width: 100px;height: 50px;" :src="scope.row.photo"
                                    alt="">
                            </template>
                        </el-table-column>
                        <el-table-column prop="type" label="类型" align="center" />
                        <el-table-column label="折扣" align="center" prop="discountValue">
                            <template #default="scope">
                                <span v-if="scope.row.type == '打折卷'">{{ scope.row.discountValue }}折</span>
                                <span v-if="scope.row.type == '抵扣卷'">¥{{ scope.row.discountValue }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="描述" align="center" show-overflow-tooltip>
                            <template #default="scope">
                                <span>{{ scope.row.description }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="规则" align="center" show-overflow-tooltip>
                            <template #default="scope">
                                <span>使用规则 满{{ scope.row.rule }}元才能使用</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="有效期" align="center" show-overflow-tooltip>
                            <template #default="scope">
                                <span>{{ scope.row.period }}天</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="最高抵扣" align="center">
                            <template #default="scope">
                                <span>{{ scope.row.maxDiscountValue }}元</span>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="160">
                            <template #default="scope">
                                <el-button link type="primary" size="small"
                                    @click="addEdiClick(2, scope.row)">编辑</el-button>
                                <el-button link type="danger" size="small" @click="delData(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <Pagination v-if="total != 0" :page="page" :total="total" @pageSizeChanged="handlePageSizeChange"
                        @currentPageChanged="handleCurrentPageChange" />
                </el-tab-pane>
            </el-tabs>
        </el-card>
        <!-- 新增修改 -->
        <el-dialog v-model="dialogVisible" :title="isAdd ? '新增' : '修改'" width="700px" :before-close="handleClose"
            top="5vh">
            <Add v-if="dialogVisible" @closeOK="closeOK" @closeAdd="handleClose" :isAdd="isAdd" :row="rowData.row" />
        </el-dialog>
    </div>
</template>

<script setup>
import { memberSettingsAdd, memberSettings, memberEquitiesList, memberEquitiesDelete } from '@/api/permission.js'
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import Upload from '@/components/elUpload/index.vue'
import Add from './add.vue' // 引入组件
import Pagination from '@/components/pagination/index.vue' // 引入分页组件
// 菜单
const activeName = ref('1')
const handleClick = (tab, event) => {
    if (tab.props.name == '1') {
        getList()
    } else {
        getMemberEquities()
    }
}
// 权益配置
const dialogVisible = ref(false)
const isAdd = ref(false)
const page = reactive({
    level: '',
    pageNum: 1,
    pageSize: 10
})
const rowData = reactive({
    row: {}
})
const total = ref(0)
const memberEquitiesListData = reactive([])
const getMemberEquities = () => {
    memberEquitiesListData.length = 0
    memberEquitiesList(page).then(res => {
        if (res.code == 200) {
            memberEquitiesListData.push(...res.data.records)
            total.value = res.data.total
        }
    })
}
// 新增
const addEdiClick = (num, row) => {
    dialogVisible.value = true
    if (num == 2) {
        isAdd.value = false
        rowData.row = row
    } else {
        isAdd.value = true

    }
}

// 搜索
const onSubmit = () => {
    getMemberEquities()
}
// 重置
const reset = () => {
    page.level = "";
    page.pageNum = 1;
    page.pageSize = 10;
    getMemberEquities()
}
// 确认弹框
const closeOK = () => {
    dialogVisible.value = false;
    getMemberEquities()
}
// 弹框关闭
const handleClose = () => {
    dialogVisible.value = false
}
// 分页
const handlePageSizeChange = (val) => {
    page.pageNum = 1
    page.pageSize = val
    getMemberEquities()
}

const handleCurrentPageChange = (val) => {
    page.pageNum = val
    getMemberEquities()
}
// 删除
const delData = (scope) => {
    ElMessageBox.confirm(
        '是否删除该条数据?',
        '删除',
        {
            confirmButtonText: 'OK',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            memberEquitiesDelete(scope.id).then(res => {
                if (res.code == 200) {
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                    getMemberEquities()
                }
            })

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })
}

// 基础配置
const ratio = ref('')
const tableData = ref([])
const deleteRow = (index) => {
    tableData.value.splice(index, 1)
}
const onAddItem = () => {
    tableData.value.push({
        name: '',
        level: '',
        minGrowth: '',
        maxGrowth: '',
        levelIcon: '',
    })
}
const OK = () => {
    let par = {
        ratio: ratio.value,
        memberDes: tableData.value
    }
    memberSettingsAdd(par).then(res => {
        if (res.code == 200) {
            ElMessage({
                type: 'success',
                message: '保存成功'
            })
            getList()
        }
    })

}
const getList = () => {
    memberSettings().then(res => {
        if (res.code == 200) {
            tableData.value = res.data.memberSettings
            ratio.value = res.data.ratio
        }
    })
}



onMounted(() => {
    getList()
    getMemberEquities()
})
</script>

<style lang="scss" scoped>
.main {
    padding: 0 5px 5px 5px;
}
</style>